<script setup lang='ts'>
const {data} = defineProps<{data:any}>()
</script>

<template>
    <div class="content" v-for="i in data" :key="i._id">
        <div class="dataone">
            <h2>{{i.name}}</h2>
            <div class="data">
                <p>id：{{i._id}}</p>
                <p>积分：{{i.types}}</p>
                <p>分类：{{i.selectData}}</p>
                <p>大小：{{i.size}}</p>
            </div>
        </div>
    </div>
    <div class="datatwo">
        <div class="data">
            <h3>使用软件</h3>
            <p>An</p>
        </div>
    </div>
</template>

<style scoped lang="scss">
.content {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;

    .dataone {
        width: 100%;
        height: 100%;

        .data {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
            font-size: 12px;
        }
    }

}

.datatwo {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
    margin-top: 15px;
    margin-bottom: 15px;

    .data {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        margin-top: 10px;
    }
}
</style>